<template>
  <!-- 发货单-待收货 -->
  <div>
    <van-card
      v-for="(e, i) in waitReceiving"
      :key="i"
      :desc="'下单时间: ' + e.orderTime"
      :title="e.title"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <div>下单人: {{ e.orderUserName }}</div>
      </template>
      <template #footer>
        <van-button plain color="#039" round @click="confirmReceipt(i)"
          >收货</van-button
        >
      </template>
    </van-card>
    <!-- 进行判断:如果列表为空则展示 -->
    <van-empty
      v-if="waitReceiving.length == 0"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="暂无消息"
    />
  </div>
</template>

<script>
import { affirmGoods } from "@/request/api";
export default {
  data() {
    return {};
  },
  props: ["waitReceiving"],
  methods: {
    confirmReceipt(index) {
      console.log(this.waitReceiving[index].serialNo);
      // vant的Dialog组件完成弹出框
      this.$dialog
        .confirm({
          title: "是否确认收货?",
        })
        .then(() => {
          // on confirm
          // 发送请求修改它的状态标识
          affirmGoods(this.waitReceiving[index].serialNo).then((res) => {
            console.log(res);
          });

          // 刷新页面
          setTimeout(() => {
            location.reload();
          }, 100);
        })
        .catch(() => {
          // on cancel
          this.$toast.success("取消成功");
        });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-card__header {
  border-bottom: 1px solid #ccc;
}
.van-card__footer {
  padding-top: 0.1rem;
}
.van-button {
  width: 0.7rem;
  height: 0.3rem;
}
.van-card__content {
  line-height: 0.2rem;
}
.van-card {
  margin-top: 0.1rem;
}
</style>